<template>
  <view class="container">
    <!-- 导航栏 -->
    <post-nav-bar title="粉丝"></post-nav-bar>

    <!-- 标签页 -->
    

    <!-- 列表内容 -->
    <scroll-view
      scroll-y
      @scrolltolower="loadMore"
      class="scroll-view"
    >
     
      
      <view class="list-item" v-for="item in list" :key="item.userId">
        <u-avatar
          :src="item.profilePicture || '../../static/image/user/user.jpg'"
          size="50"
          shape="circle"
		  @click="handleItemClick(item.userId)"
        ></u-avatar>
        
        <view class="user-info"  @click="handleItemClick(item.userId)">
          <text class="username">{{ item.username }}</text>
          <text class="fans-count"></text>
        </view>

        <u-button
          :custom-style="getBtnStyle(item)"
          @click="toggleFollow(item)"
        >
           {{  item.isFollowed ? '互相关注' : '回关' }}
        </u-button>
		
      </view>
	  <u-loadmore
	    :status="loadStatus"
	    :icon-type="loadStatus === 'nomore' ? 'none' : 'circle'"
	  />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { appUrl } from '../../main';
// 增加状态类型定义
const FOLLOW_STATUS = {
  UNFOLLOW: 0,     // 未关注
  FOLLOWING: 1,    // 已关注
  MUTUAL: 2        // 互相关注
}
const token = uni.getStorageSync("token")
const currentTab = ref(0)
const list = ref([])
const page = ref(1)
const loadStatus = ref('loadmore')

// 按钮样式配置
const followBtnStyle = reactive({
  default: {
    width: '80px',
    height: '32px',
    color: '#fff',
    backgroundColor: '#FE2C55',
    border: 'none',
    fontSize: '14px'
  },
  active: {
    width: '80px',
    height: '32px',
    color: '#666',
    backgroundColor: '#fff',
    border: '1px solid #eee',
    fontSize: '14px'
  }
})
const userId = uni.getStorageSync("userId");
// 加载数据
const loadData = async (reset = false) => {
  if (reset) page.value = 1
  loadStatus.value = 'loading'
  
  try {
    const res = await uni.request({
      url: `${appUrl}/follow/${userId}/fan`,
      method: 'GET',
      data: {
        page: page.value,
        limit: 10
      }
    })

    if (res.data.status === 200) {
	  console.log(res.data)
		// 处理关注状态
      const processedData = res.data.data.map(item => ({
        ...item,
        // // 根据后端返回字段调整状态映射
        // followStatus: item.mutual ? FOLLOW_STATUS.MUTUAL : 
        //              item.isFollowing ? FOLLOW_STATUS.FOLLOWING : 
        //              FOLLOW_STATUS.UNFOLLOW,
		isFollowed: item.isFollowing, 
		}))
      list.value = reset ? processedData : [...list.value, ...processedData]
      loadStatus.value = res.data.hasMore ? 'loadmore' : 'nomore'
      page.value++
    }
  } catch (error) {
	console.log(error)
    loadStatus.value = 'error'
    uni.showToast({ title: '加载失败', icon: 'none' })
  }
}


// 加载更多
const loadMore = () => {
  if (loadStatus.value === 'loadmore') loadData()
}

// 关注/取消关注
const toggleFollow = async (item) => {
  try {
    await uni.request({
	  url:`${appUrl}/users/${userId}/follow`,
      method: 'POST',
      data: {
      				userId: item.userId,
      				"action": item.isFollowed?'unfollow':'follow'
      		}
    })
    item.isFollowed = !item.isFollowed
  } catch (error) {
    uni.showToast({ title: '操作失败', icon: 'none' })
  }
}

// 优化关注按钮文本
const getBtnText = (item) => {
  // switch(item.followStatus) {
  //   case FOLLOW_STATUS.MUTUAL:
  //     return '互相关注'
  //   case FOLLOW_STATUS.FOLLOWING:
  //     return '已关注'
  //   default:
  //     return item.isFan ? '回关' : '关注'
  // }
  return item.isFollowed? '互相关注' : '回关'
}


// 优化按钮样式
const getBtnStyle = (item) => {
  // switch(item.followStatus) {
  //   case FOLLOW_STATUS.MUTUAL:
  //     return mutualBtnStyle
  //   case FOLLOW_STATUS.FOLLOWING:
  //     return followBtnStyle.active
  //   default:
  //     return followBtnStyle.default
  // }
  return item.isFollowed?followBtnStyle.active:followBtnStyle.default
}

// 新增互相关注样式
const mutualBtnStyle = {
  width: '100px',
  height: '32px',
  color: '#666',
  backgroundColor: '#f5f5f5',
  border: '1px solid #ddd',
  fontSize: '14px'
}

const handleItemClick = (userId) => {
try {
  // 存储用户ID到本地
  uni.setStorageSync('followId', userId)
  
  // 跳转到用户页面
  uni.navigateTo({
	url: `/pages/FollowUserView/FollowUserView`
  })
} catch (e) {
  uni.$u.toast('操作失败，请重试')
  console.error('存储失败:', e)
}
}
onMounted(() => loadData(true))
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #fff;
}

.scroll-view {
  height: calc(100vh - 180rpx);
  padding: 0rpx 0rpx;
}



.list-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .user-info {
    flex: 1;
    margin-left: 20rpx;
    
    .username {
      font-size: 28rpx;
      color: #333;
      display: block;
    }
    
    .fans-count {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>